<!--
* @Author: 张昊
* @Date:  2022-10-18 11:04:37
* @FilePath: /pages/mine/collect/collect.vue
* @Description: 我的收藏
-->

<template>
	<view class="common-class">
		<!-- 公共课程列表 -->
		<view v-for="(item, index) in detailsItems" :key="item.goods.id">
			<view class="common-list card" v-if="item.is_collect">
				<view class="img"><image class="img" :src="item.goods.image" :alt="item.goods.image" /></view>

				<view class="img-list">
					<view class="img-title">{{ item.goods.title }}</view>
					<view class="img-text">
						<text class="num">¥ {{ item.goods.price }}</text>
						<text class="remarks">{{ item.goods.sales }}人购买</text>
					</view>
				</view>
				<view class="buttons">
					<u-button @click="clickShopping(item.goods)" size="mini" type="primary" text="购买"></u-button>
					<u-button
						@click="clickStar(item, index, active)"
						size="mini"
						plain
						type="warning "
						:icon="!item.is_collect ? 'star' : 'star-fill'"
						:text="!item.is_collect ? '收藏' : '已收藏'"
					></u-button>
				</view>
			</view>
		</view>

		<!-- 下拉刷新组件 -->
		<txt-pulldown :flagIn="flag"></txt-pulldown>
	</view>
</template>

<script>
// 收藏
import { collect, collectStar } from '@/common/api.js';
import onReachBottom from '@/common/mixin/onReachBottom.js';
export default {
	mixins: [onReachBottom],
	data() {
		return {
			detailsItems: []
		};
	},
	methods: {
		// 点击某个商品收藏
		async clickStar(item, index, active) {
			await collectStar({ goods_id: item.goods.id });

			item.is_collect = !item.is_collect;
			// this.Reset();
		},
		// 点击购买
		async clickShopping(item) {
			console.log('item', item);
			let details = {
				image: item.image,
				title: item.title,
				price: item.price,
				sales: item.sales,
				id: item.id,
				num: item.num || 1
			};
			uni.navigateTo({
				url: '/pages/class/details/details?item=' + JSON.stringify(details)
			});
			// 先打开优惠券页面
			// this.show = true
		},
		async reqPaging() {
			let { data, total } = await collect({ limit: 10, page: this.num });
			this.total = total;
			this.detailsItems = [
				...this.detailsItems,
				...data.map(e => ({
					...e,
					...{ is_collect: true }
				}))
			];
		}
	},
	async onLoad() {
		console.log('11this.detailsItems =', this.detailsItems);
	}
};
</script>

<style lang="scss">
.common-list {
	// width: 100%;
	height: 159rpx;
	// padding: 30rpx 44rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.img {
		width: 238rpx;
		height: 134rpx;
		margin-left: 14rpx;
	}
	.img-list {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		margin-left: 23rpx;
		.img-title {
			font-size: 28rpx;
			color: #3b3a3f;
		}
		.img-text {
			.num {
				color: #f77b4b;
			}
			.remarks {
				font-size: 22rpx;
				color: #a1a3a7;
			}
		}
	}
	.buttons {
		width: 100rpx;
		height: 120rpx;
		margin-right: 28rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
	}
}
</style>
